<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
				ul{
					width: 198px;
					height: 200px;
					margin: 100px auto;
					transform-style: preserve-3d;
					transform: rotateX(0deg) rotateY(0deg);
				}
				ul li{
					list-style: none;
					width: 200px;
					height: 200px;
					text-align: center;
					line-height: 200px;
					position: absolute;
				}
				ul li:nth-child(1){
					background-color: red;
					transform:translateY(100px) rotateX(90deg);
				}
				ul li:nth-child(2){
					background-color: gold;
					transform:translateY(-100px) rotateX(90deg);
				}
				ul li:nth-child(3){
					background-color: hotpink;
					transform:translateX(100px) rotateY(90deg);
				}
				ul li:nth-child(4){
					background-color: blue;
					transform:translateX(-100px) rotateY(90deg);
				}
				ul li:nth-child(5){
					background-color: green;
					transform:translateZ(-100px) ;
					
				}
				ul li:nth-child(6){
					background-color: black;
					transform:translateZ(100px) ;
				}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
